<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-21 16:20:03
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-22 19:13:17
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\components\TemplateBottomControls.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
    import { computed, ref } from 'vue'
    // 图标
    import {
        SettingOutlined
    } from '@ant-design/icons-vue';
    // emit 通信
    const emit = defineEmits(['batchOperation'])
    // 模拟数据
    const morkData = ref([
        {num:1, visible:false},
        {num:2, visible:false},
        {num:3, visible:false},
        {num:4, visible:false},
        {num:5, visible:false},
        {num:4, visible:false},
        {num:5, visible:false},
        {num:4, visible:false},
        {num:5, visible:false},
        {num:4, visible:false},
        {num:5, visible:false},
        {num:4, visible:false},
        {num:5, visible:false},
        {num:4, visible:false},
        {num:5, visible:false},

    ])
    // 当前选择的项
    const activeItem = ref(1)

    // 气泡内选择素材导入方式
    const radioGroupVal = ref('1')
    // 批量操作
    const batchOperation = ()=>{
        emit('batchOperation')
    }

</script>

<template>
    <div class="template_bottom_controls">
        <div class="cart_all_box">
            <!-- 批量操作 -->
            <div  class="batch_operationbatch_operation" @click="batchOperation">
                <setting-outlined style="font-size: px;"/>
                <div>
                    <span>
                        批量
                    </span>
                    <br>
                    <span>
                        操作
                    </span>
                </div>
            </div>


            <div class="cart_item_box" v-for="item in morkData" :key="item.num">
                <div class="cart_item_add "  @click.stop="activeItem = item" :class="{active_item: activeItem == item}" >
                    <a-popover 
                    v-model:visible="item.visible"
                    placement="top"
                     trigger="click" 
                     :autoAdjustOverflow="false"
                    :getPopupContainer=" triggerNode => {
                        return triggerNode.closest('.template_bottom_controls')
                    }">
                      <template #content>
                        <div class="propover_content">
                            <a-radio-group  v-model:value="radioGroupVal" name="radioGroup">
                                  <a-radio value="1" style="padding: 0;">素材库导入</a-radio>
                                  <a-radio value="2" style="padding: 0;">本地上传</a-radio>
                            </a-radio-group>
                            <div class="btn_box">
                                <a-button class="cancel_btn">取消</a-button>
                                <a-button class="confirm_btn" type="primary">确定</a-button>
                              </div>
                        </div>
                    </template>
            <span class="cart_add_text" @click="item.visible = true"> 点击添加 </span>
            </a-popover>
                </div>
                <!-- 编号 -->
                <span class="serial_number"  
                @click.stop="activeItem = item" 
                :class="{active_number: activeItem == item}" >{{ item.num }}</span>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
        .template_bottom_controls{
            border-top: 1px solid #E5E5E5;
            // 设置气泡框内部的radio 边距样式
            :deep(.ant-radio-wrapper){
                margin: 0;
                .ant-radio-input{
                    margin-right: 5px;
                }
            }
            // 设置气泡框本地的边距
            :deep(.ant-popover-inner-content){
                padding: 24px;
            }
            :deep(.ant-popover-inner){
                border-radius: 8px;
            }
            .propover_content{

                // 气泡框内部的按钮
                .btn_box{
                    display: flex;
                    justify-content: end;
                    margin-top: 24px;
                    gap:8px;
                }
            }

        // 遍历的总容器
        .cart_all_box{
            box-sizing: border-box;
            display: flex;
            height: 159px;
            min-width: 1200px;
            overflow-x: auto;
            padding: 20px 32px 8px 140px;
            position: relative;
            &::-webkit-scrollbar {
                width: 8px; /* 滚动条的宽度 */
                height: 10px; /* 滚动条的高度，垂直滚动条可能用得上 */
            }
            &::-webkit-scrollbar-thumb {
                background: #888; /* 滑块的背景颜色 */
                border-radius: 10px; /* 滑块的圆角 */
            }

            // 批量操作按钮
            .batch_operationbatch_operation{
                height: 92px;
                width: 60px;
                left: 40px;
                position: fixed;
                cursor: pointer;
                border-radius: 50px;
                z-index:1;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                line-height: 1.2;
                border: 1px solid #E5E5E5;
                background-color: #fff;
                gap: 10px;
                transition: box-shadow 0.3s ease; /* 平滑的阴影过渡效果 */
                &:hover{
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* X偏移，Y偏移，模糊半径，颜色 */
                border-color: transparent; /* 鼠标悬停时边框透明 */
                }
            }

            .cart_item_box{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 3px 10.5px;
                .serial_number{
                    padding: 1px 4px;
                    line-height: 1;
                    background-color: #f4f5f5;
                    text-align: center;
                    margin-top: 7px;
                    cursor: pointer;
                }

            .cart_item_add{
                    align-items: center;
                    background-clip: content-box;
                    background-color: #1c1f23;
                    border: 3px solid rgba(28, 31, 35, .08);
                    border-radius: 3px;
                    box-sizing: border-box;
                    color: #fff;
                    cursor: pointer;
                    display: flex;
                    flex-direction: column;
                    font-size: 14px;
                    font-weight: 600;
                    height: 90px;
                    justify-content: center;
                    text-align: center;
                    width: 160px;

                    // 点击添加的文字
                    .cart_add_text{
                        color: #fff;
                        transition: all  .3s;
                        &:hover{
                            font-size: 16px;
                        }
                    }

                    // 气泡框内按钮样式
                    .cancel_btn{

                    }
                    .confirm_btn{
                        
                    }
                }
            .active_item{
                border-color: #1664ff !important
            }
            .active_number{
                background-color: #1664ff;
                color: #fff;
            }
            }
        }
    }
</style>